﻿@model  DHQGHN.DAL.Common.DataPage<DHQGHN.PM0.Models.Admin.UserInGroupModel>
@{
    ViewBag.Title = ViewBag.CurrentMenuName;
    Layout = "~/Views/Shared/_AdminLayout.cshtml";
}
<div class="content">
    <div class="clear"></div>
    <table style="width: 100%">
        <tr>
            <td style="height: 40px;">
                <div id="nav"><a href="/UserInGroup/Index" title="">@ViewBag.Title.ToUpper()</a></div>
            </td>
        </tr>
        <tr>
            <td style="">
                <div style="width: 90%;">
                    <div>
                        <div>
                            <div class="col-md-2" style="text-align:right;">
                                <label>@Resources.Localization.AppName</label>
                            </div>
                            <div class="col-md-4">
                                @Html.DropDownList("appid", new SelectList(ViewBag.lstApp, "value", "text", 0), new { @id = "input-appid", @name = "appid", @class = "SelectBoxContent", @placeholder = "" })
                            </div>
                            <div class="col-md-2" style="text-align:right;padding:4px 4px 4px 4px;">
                                Nhóm người dùng
                            </div>
                            <div class="col-md-4">
                                @Html.DropDownList("input-code", new SelectList(ViewBag.lstGroupUser, "value", "text",-1),
                                                              new { @name = "code", @class = "SelectBoxContent", @placeholder = "", @disabled = "disabled" })
                            </div>
                            @*<div class="col-md-4">
                                @Html.DropDownList("input-code", new SelectList(string.Empty, "Value", "Text"),
                                                    "--- Chọn quận, huyện ---", new { @class = "form-control" })
                            </div>*@
                        </div>

                        <div>
                            <div style="height: 10px;"></div>
                            <div class="col-md-12">
                                <div style="padding-top: 10px; text-align: center">
                                    <div class="col-md-12">
                                        <span class="input-group-btn">
                                            <button type="button" id="user-in-group-add" style="margin-left: 10px;" class="btn btn-primary" value="Thêm mới">
                                                <span class="glyphicon glyphicon-plus"></span>Gán người dùng
                                            </button>
                                        </span>
                                        <br />
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                 </div>
            </td>
        </tr>
        <tr>
            <td colspan="4">
                <div id="user-in-group-list">
                    @{
                        Html.RenderPartial("_UserInGroupList");
                    }
                </div>
            </td>
        </tr>
    </table>
</div>
<script type="text/javascript">
    @functions{
        public string GetAntiForgeryToken()
        {
            string cookieToken, formToken;
            AntiForgery.GetTokens(null, out cookieToken, out formToken);
            return cookieToken + "," + formToken;
        }
    }

    function btnSearchClick() {
        OnCriteria(0);
    }
    $(document).ready(function () {
        $('#user-in-group-add').click(function (event) {
            if ($("#input-code").val() == -1) {
                warning("Bạn cần chọn nhóm trước để gán người dùng", "Gán người dùng");
                $('.ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-dialog-buttons').show();
                $("body").on('click', function (e) {
                    $(".ui-dialog .ui-dialog-titlebar-close").click();
                    $('body').off('click');
                });
                $(".ui-dialog").on('click', function (e) {
                    e.stopPropagation();
                });
                event.stopPropagation();
            }
            else {
                prepareCreate(-1, "Gán người dùng vào nhóm");
            }
        });
        $('#input-code').change(function () {
            OnCriteria(crrPageIndex);
        });
        $('#input-appid').change(function () {
            var codeName = "input-code";
            
            if ($("#input-appid").val() == 0) {
                removeAll(codeName);
                fillDefaultValue("--- Chọn nhóm ---", codeName);
                preventSelect(codeName);
                OnCriteria(0);
                return;
            }
            
            removeAll(codeName);
            fillDefaultValue("--- Chọn nhóm ---", codeName);
            preventSelect(codeName);
            OnCriteria(0);

            $.ajax({
                type: 'POST',
                url: '@Url.Action("GetListGroupByApp", "UserInGroup")', // we are calling json method
                dataType: 'json',
                headers: {
                    'VerificationToken': '@GetAntiForgeryToken()'
                },
                data: {
                    AppId: $('#input-appid').val()
                },
                success: function (dataItems) {
                    fillData(codeName, dataItems);
                },
                error: function (ex) {
                    alert('Failed to retrieve states.' + ex);
                },
                complete: function () {
                    rightSelect(codeName);
                }
            })
        });

        function fillData(id, dataItems) {
            var parent = $("#" + id);
            $.each(dataItems, function (i, item) {
                parent.append(
                    $('<option>', {
                        value: item.Value,
                        text: item.Text
                    }, '<option/>'));
            });
        }
        
        function rightSelect(ids) {
                $("#" + ids).removeAttr('disabled');
        }

        function removeAll(ids) {
                $("#" + ids).empty();
        }

        function fillDefaultValue(vals, ids) {
                $("#" + ids).append('<option value ="-1">' + vals + '</option>');
        }

        function preventSelect(ids) {
                $("#" + ids).attr('disabled', 'disabled');
        }

        function prepareCreate(userId, dlgTitle) {
            $('#user-in-group-model-container')
                  .load("/UserInGroup/actionPrepareCreateOrUpdateUserInGroup",
                  { id: userId, groupID: $("#input-code").val().trim(), AppId: $("#input-appid").val() }, function (data) {
                      $(this).dialog({
                          draggable: true,
                          modal: true,
                          resizable: false,
                          title: dlgTitle,
                          maxheight: 500,
                          width: 'auto',
                          my: "center",
                          at: "center",
                          of: window,
                          buttons: [
                                {
                                    text: "Lưu",
                                    icons: {
                                        primary: "ui-icon-heart"
                                    },
                                    class: 'btn btn-primary',
                                    click: function () {
                                        var values = getListUserID();
                                        if (values == "") {
                                            warning("Bạn cần chọn người dùng", "Phân người dùng vào nhóm");
                                        }
                                        else {
                                            if (save) {
                                                var result = save();
                                                if (result) {
                                                    $(this).dialog("destroy");
                                                    //$('#user-in-group-model-container').hide();
                                                }
                                            }
                                        }                                        
                                    }
                                },
                                {
                                    text: "Đóng",
                                    icons: {
                                        primary: "ui-icon-close"
                                    },
                                    class: 'btn btn-primary',
                                    click: function () {                                        
                                        $(this).dialog("destroy");
                                       // $('#user-in-group-model-container').hide();
                                    }

                                }
                          ]
                      });
                  });
        }
    });

    var crrPageIndex;
    function OnCriteriatoview(pageIndex) {
        var code = $('#input-code');
        alert(code);
        var name = $('#input-name');
        crrPageIndex = pageIndex;
        name = name != null ? name.val().trim() : "";
        code = code != null ? code.val().trim() : "";
        $.ajax({
            dataType: "html",
            type: "POST",
            url: '/UserInGroup/actionSearch',
            contentType: "application/json",
            data: JSON.stringify({ pageIndex: pageIndex, aModel: { GroupId: code, Username: name } }),
            success: function (response) {
                var $catlist = $('#user-in-group-list');

                if ($catlist == null || $catlist.length == 0) {
                    window.notice('@*@Resources.Localization.MsgItemNotFound*@', window.notice_error);
                }
                else {
                    $catlist.html(response);
                }
            }
        });
        setTimeout(function () { $('#search_form').find('input:text:visible:first').focus(); }, 500);
    }

    $('input.txtsearchnametoview').bind('keypress', function (event) {
        var keycode = (event.keyCode ? event.keyCode : event.which);
        if (keycode == 13 && OnCriteriatoview) {
            OnCriteriatoview(0);
        }
    });
</script>